<style lang="scss" scoped>
    @import '@/assets/css/variable';
    .show{
        position: absolute;
        top: 0;
        bottom: $tabbar-height;
        width: 100%;
        background-color: white;
        min-height: 100%;
        overflow: auto;
        box-sizing: border-box;
        img{
            width: 100%;
        }
        .description{
            font-size: 1.7rem;
            padding-top: 1.2rem;
            padding-bottom: 1.2rem;
            padding-left: 2rem;
            position:relative;
            &:after {
                position: absolute;
                content: ' ';
                left: 0;
                top: 1rem;
                width:0.8rem;
                height: 2rem;
                background-color: sandybrown;
            }
            border-bottom: 1px solid $border-c;
        }
        .introduce{
            background-color: white;
            padding-bottom: 1rem;
        }
        .fix-bottom{
            position: fixed;
            bottom: 1rem;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 3;
            box-sizing: border-box;
        }
    }
</style>
<template>
  <div class="show">
      <div class="top">
          <img :src="caseItem.cover" alt="">
      </div>
      <div class="description">{{caseItem.title}} | 案例介绍</div>
      <div class="introduce padding-lr line-height-l">
        <div v-for="item in caseItem.introduce" :key="Number(item.id)">
            <div v-if="item.type === 'text'" class="margT-l line-height-l fs-15" v-html="item.value"></div>
            <img v-if="item.type === 'img'" class="margT-l" :src="item.value"/>
        </div>
      </div>
      <div class="tabbar-height"></div>
      <div class="fix-bottom padding-lr">
        <van-button :color="$store.getters.getMasterColor" size="normal" block @click="toView(caseItem)">使用该方案</van-button>
      </div>
  </div>
</template>

<script>
import {Button,Toast} from 'vant';

export default {
    name: "Show",
    components: {
        [Button.name]: Button
    },
    data() {
        return {
            caseItem: {}
        }
    },
    created () {
        this.getCaseById()
        // const caseItem = this.$store.getters.getCaseItem;
        // if(caseItem) {
        //     _this.getCaseById()
        // }else{
        //     _this.caseItem = caseItem
        // }
    },
    methods: {
        getCaseById() {
            const _this = this;
            const toast = Toast.loading({
                forbidClick: true,
                message: '加载中...',
            });
            let params = {
                id: Number(_this.$route.params.id)
            }
            _this.$request.getCaseById(params).then(res=>{
                _this.caseItem = res.data
                this.$store.commit('setCaseItem', _this.caseItem);
                toast.clear()
            })
        },
        toView(item) {
           console.log(item, 'itemitem');
           this.$router.push('/case/applyActivity/'+item.activity_id)
        }
    }
}
</script>